<!--九宫格-->
<template>
  <view>
    <tui-grid>
      <block :key='index' v-for='(item,index) in gridList'>
        <!--不支持class-->
        <tui-grid-item @click='toGridDetail(item)' bgcolor="#FFFFFF" cell='4'>

          <!--图标-->
          <view class='tui-grid-icon'>
            <tui-icon :color='item.color' :name='item.icon' :size='item.size' color="#999999"></tui-icon>
          </view>

          <!--图片-->
<!--          <view class="tui-grid-icon">-->
<!--            <image :src="item.img" class="self-tui-grid-icon-img"></image>-->
<!--          </view>-->

          <text class='tui-grid-label'>{{item.name}}</text>
        </tui-grid-item>
      </block>
    </tui-grid>
  </view>
</template>

<script>
  import tuiIcon from '@/components/icon/icon'
  import tuiGrid from '@/components/grid/grid'
  import tuiGridItem from '@/components/grid-item/grid-item'

  export default {
    components: {
      tuiGrid,
      tuiGridItem,
      tuiIcon
    },
    name: "grid",
    data() {
      return {
        // icon时 使用name  image时 使用url
        gridList: [
          {icon: 'refresh', name: 'refresh', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'search', name: 'search', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'close-fill', name: 'close-fill', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'shut', name: 'shut', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'plus', name: 'plus', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'star-fill', name: 'star-fill', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'revoke', name: 'revoke', size: 30, img: '../../../static/icon/container.png', url:''},
          {icon: 'shop', name: 'shop', size: 30, img: '../../../static/icon/container.png', url:''}
        ]
      }
    },
    methods: {
      toGridDetail(item) {
        this.tui.toast('九宫格跳转');
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "grid.css";
</style>
